@W-19143871 Marketing Consent Footer Email Capture component with Shopper Consents hooks by mitesh-patel-crm · Pull Request #3674 · SalesforceCommerceCloud/pwa-kit

mitesh-patel-crm · 2026-02-19T06:21:12Z

This feature is to add support for shopper subscriptions to marketing communications. An example is included as the email subscription component in the footer section.

Description

The feature uses the Shopper Consents API to opt shoppers into consent subscriptions configured by an administrator in B2C Commerce.

Requires the EnableConsentWithMarketingCloud Shopper Configurations flag is set (meaning the feature is enabled in ECOM).

SLAS Client requires the scope sfcc.shopper-consents to read consent options, and sfcc.shopper-consents.rw to submit consent (opt-in or opt-out).

As an example, the SubscribeMarketingConsent footer component uses the useMarketingConsent hook for managing consent data and mutations via useEmailSubscription to help manage email subscriptions. This example footer component will not attempt any callouts if the feature is disabled (as indicated by the EnableConsentWithMarketingCloud Shopper Configurations flag).

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Changes

Updated Email Subscription component (in the footer section) with Shopper Consents hooks, also with updated styling and labels.
Updated commerce-sdk-react to use Shopper Consents hooks.
Fix for email validation on marketing consent capture: TLD must be more than 1 character.
Increase package max size from 90KB to 95KB, accounting for footer component size.
Check for feature enablement via Shopper Configurations API (feature=>EnableConsentWithMarketingCloud)

How to Test-Drive This PR

Enable Salesforce Connections in your B2C Commerce instance to connect with a Salesforce Org that has Data Cloud and E360 Engagement Channels enabled.
Set up Marketing Consent in B2C Commerce
Try email footer component to capture shopper marketing consent.

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

Screenshots:

Success
Error

…pper Consents hooks.

cc-prodsec · 2026-02-19T06:21:21Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

…mmunications. Email capture component updated in footer section to use Shopper Consents API. [#3674]

…scription footer component

kzheng-sfdc · 2026-02-20T17:41:39Z

packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.js

+        [formatMessage]
+    )
+
+    const handleSignUp = useCallback(async () => {


Can a user click on the signup button multiple times to create duplicate submissions or race conditions?

this would be handled gracefully in the ECOM back-end, by nature of relying on the ECOM DB to persist the opt-in/opt-out preference for the user, in the order the request were received. The last one received will overwrite any prior ones.

kzheng-sfdc · 2026-02-20T17:47:23Z

packages/template-retail-react-app/app/utils/subscription-validators.js

+ * Regular expression for email validation
+ * Validates standard email format with domain and TLD
+ */
+export const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/


Reuse the logic in email-utils.js?

packages/template-retail-react-app/app/utils/subscription-validators.js

kzheng-sfdc · 2026-02-20T17:54:03Z

packages/template-retail-react-app/app/utils/subscription-validators.js

+ * @param {string} phone - The phone number to validate
+ * @returns {ValidationResult} Validation result with error code if invalid
+ */
+export const validatePhone = (phone) => {


Is this actually used anywhere?

nope! But I wanted to leave tests and validations for completeness on the API, as trying to interact with various Consents APIs (even ones we don't demonstrate in the example) require a particular E164 format for phone numbers.

kzheng-sfdc · 2026-02-20T17:55:06Z

packages/template-retail-react-app/app/components/subscription/subscribe-form.jsx

+            {state?.feedback?.message && (
+                <Alert status={state.feedback.type === 'error' ? 'error' : 'success'} mb={4}>
+                    <AlertIcon />
+                    <AlertDescription>{state.feedback.message}</AlertDescription>


Is the UX calling for inline alert instead of toast?

Yes. Perhaps a Toast could work, but it would show at the top of the app. I forget the UX reasons for making it inline. I can ask if they recall.

packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.js

…mail subscription hooks to follow react-hook-form pattern. Consolidated email and phone number validations to common util.

…D must be more than 1 character.

…or footer component size. Made a11y improvements to contrast.

…sted from client rather than server, so it doesn't need to be loaded on each page SSR.

…pper Consents hooks (#3674) - Updated Email Subscription component (in the footer section) with Shopper Consents hooks, also with updated styling and labels. - Updated commerce-sdk-react to use Shopper Consents hooks. - Fix for email validation on marketing consent capture: TLD must be more than 1 character. - Increase package max size from 90KB to 95KB, accounting for footer component size. - Check for feature enablement via Shopper Configurations API (feature=>`EnableConsentWithMarketingCloud`)

@W-19143871 Marketing Consent Footer Email Capture component with Sho…

5bdac1e

…pper Consents hooks.

mitesh-patel-crm requested a review from a team as a code owner February 19, 2026 06:21

mitesh-patel-crm requested review from bfeister and kzheng-sfdc February 19, 2026 06:22

mitesh-patel-crm mentioned this pull request Feb 19, 2026

@W-19143871 Marketing Consent Footer Email Capture component #3671

Closed

12 tasks

mitesh-patel-crm added 2 commits February 18, 2026 22:28

@W-19143871 Updated CHANGELOG.md: [Feature] Subscribe to marketing co…

33e4f76

…mmunications. Email capture component updated in footer section to use Shopper Consents API. [#3674]

@W-19143871 Fix button styling and input text truncation on email sub…

598d06f

…scription footer component

kzheng-sfdc reviewed Feb 20, 2026

View reviewed changes

packages/template-retail-react-app/app/utils/subscription-validators.js Outdated Show resolved Hide resolved

kzheng-sfdc reviewed Feb 20, 2026

View reviewed changes

packages/template-retail-react-app/app/components/subscription/hooks/use-email-subscription.js Show resolved Hide resolved

@W-19143871 Updated CHANGELOG.md for commerce-sdk-react. Refactored e…

3b73293

…mail subscription hooks to follow react-hook-form pattern. Consolidated email and phone number validations to common util.

kzheng-sfdc previously approved these changes Feb 21, 2026

View reviewed changes

@W-19143871 Fix for email validation on marketing consent capture: TL…

1fb78a0

…D must be more than 1 character.

mitesh-patel-crm dismissed kzheng-sfdc’s stale review via 1fb78a0 February 23, 2026 08:39

mitesh-patel-crm requested review from kzheng-sfdc and removed request for kzheng-sfdc February 24, 2026 17:35

bfeister previously approved these changes Feb 24, 2026

View reviewed changes

mitesh-patel-crm added the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Feb 24, 2026

@W-19143871 increase package max size from 90KB to 95KB, accounting f…

a76af0c

…or footer component size. Made a11y improvements to contrast.

mitesh-patel-crm dismissed bfeister’s stale review via a76af0c February 24, 2026 18:59

mitesh-patel-crm added 3 commits February 24, 2026 11:54

@W-19143871 switch useConfigurations for footer component to be reque…

77db307

…sted from client rather than server, so it doesn't need to be loaded on each page SSR.

@W-19143871 Clear email footer validation messages upon keypress.

b97b2d5

@W-19143871 Clear email footer validation messages upon keypress.

a51f4fc

mitesh-patel-crm requested a review from a team February 24, 2026 20:29

bfeister approved these changes Feb 24, 2026

View reviewed changes

mitesh-patel-crm requested a review from a team February 24, 2026 20:59

unandyala approved these changes Feb 24, 2026

View reviewed changes

mitesh-patel-crm merged commit add85e3 into develop Feb 24, 2026
42 checks passed

mitesh-patel-crm deleted the mitesh-patel-crm/develop-shopper-consent-marketing-preferences-signed branch February 24, 2026 21:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@W-19143871 Marketing Consent Footer Email Capture component with Shopper Consents hooks#3674

@W-19143871 Marketing Consent Footer Email Capture component with Shopper Consents hooks#3674
mitesh-patel-crm merged 9 commits intodevelopfrom
mitesh-patel-crm/develop-shopper-consent-marketing-preferences-signed

mitesh-patel-crm commented Feb 19, 2026 •

edited

Loading

Uh oh!

cc-prodsec commented Feb 19, 2026 •

edited

Loading

Uh oh!

kzheng-sfdc Feb 20, 2026

Uh oh!

mitesh-patel-crm Feb 20, 2026

Uh oh!

kzheng-sfdc Feb 20, 2026

Uh oh!

Uh oh!

kzheng-sfdc Feb 20, 2026

Uh oh!

mitesh-patel-crm Feb 20, 2026

Uh oh!

kzheng-sfdc Feb 20, 2026

Uh oh!

mitesh-patel-crm Feb 21, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

mitesh-patel-crm commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Screenshots:

Uh oh!

cc-prodsec commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

kzheng-sfdc Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

mitesh-patel-crm Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

kzheng-sfdc Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kzheng-sfdc Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

mitesh-patel-crm Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

kzheng-sfdc Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

mitesh-patel-crm Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mitesh-patel-crm commented Feb 19, 2026 •

edited

Loading

cc-prodsec commented Feb 19, 2026 •

edited

Loading